<!-- -->
<template>
  <div class='region'>
    <div class="content">
      <div class="level">地区：</div>
      <div class="level-content">
        <div @click="changeRegion({}, -1)" :class="['level-item', activeIndex == -1 ? 'active' : '']">全部</div>
        <div @click="changeRegion(item, index)" :class="['level-item', activeIndex === index ? 'active' : '']" v-for="(item, index) in regionList" :key="index">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { reqHospitalLevelAndRegion } from '@/api/path'


let regionList = ref([
  { name: '东城区', value: '001' },
  { name: '西城区', value: '002' },
  { name: '朝阳区', value: '003' },
  { name: '丰台区', value: '004' },
  { name: '石景山区', value: '005' },
  { name: '海淀区', value: '006' },
  { name: '门头沟区', value: '007' },
  { name: '房山区', value: '008' },
  { name: '通州区', value: '009' },
  { name: '顺义区', value: '0010' },
  { name: '昌平区', value: '0011' },
  { name: '大兴区', value: '0012' },
  { name: '怀有区', value: '0013' },
  { name: '平谷区', value: '0010' },
  { name: '密云区', value: '0011' },
  { name: '延庆区', value: '0012' },
  { name: '怀有区', value: '0013' }
])

let activeIndex: any = ref(-1)

const emit = defineEmits(['update:changeRegion'])

const changeRegion = (val: any, index: number) => {
  activeIndex.value = index
  emit('update:changeRegion', val.value)
}

const getRegionList = async () => {
  let res: any = await reqHospitalLevelAndRegion('Beijin')
  if (res?.code === 200) {
    regionList.value = res.data
  }
}

onMounted(() => {
  getRegionList()
})

</script>

<style lang='scss' scoped>
.region {
  .content {
    display: flex;
    .level {
        color: #7f7f7f;
        width: 48px;
      }
    .level-content {
      width: calc(100% - 48px);
      display: flex;
      flex-wrap: wrap;
      cursor: pointer;
      color: #7f7f7f;
      
      .level-item {
        margin: 0 12px 10px 0;
      }
      .active {
        color: #55a6fe;
      }
    }
  }
}
</style>
